<template>
  <div class="icon-box" :style="{height:height}">
    <el-space wrap>
      <icon-card v-for="(icon,index) in Object.entries(ElementPlusIconsVue)"
           :key="index"
           class="icon-item"
           @click="handleClickIcon(icon[0])"
           :size="25"
           :icon="icon[0]"
      >
      </icon-card>

    </el-space>

  </div>
</template>

<script setup lang="ts">
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import {ref,defineEmits,defineProps,withDefaults} from "vue";
import IconCard from "@/components/icon/IconCard.vue";

let props=withDefaults(defineProps<{
  height:string
}>(),{
  height:'fit-content'
})
let emit=defineEmits<{
  (e:"selectIcon",val:string):void
}>()
function handleClickIcon(icon:string){
  emit("selectIcon",icon)
}
</script>

<style scoped lang="less">
  .icon-box{
    overflow-y: scroll;
    .icon-item{
      cursor: pointer;
      &:hover{
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        color: whitesmoke;
        background-color: #6E35AEFF;
      }
    }
  }
  //::-webkit-scrollbar{
  //  width: 2px;
  //  height: 5px;
  //}
</style>